import React, { Component } from 'react';
import { NavBar, Icon, DatePicker, List, Picker, InputItem, TextareaItem, NoticeBar } from 'antd-mobile';
import { district } from 'antd-mobile-demo-data';
import Footer from './../../components/footer';
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
class Com extends Component {
  state = {
    data: now,
    pickerValue: [],
  };
  render() {
    return (
      <div className='box'>
        <header>
        
        <NavBar
          mode="light"
          icon={<Icon type="cross"/>}
          onLeftClick={() => this.props.history.go(-1)}
          rightContent={[
            "发布"
          ]}
        >添加结伴</NavBar>
        <NoticeBar mode="closable"
        style={{ width: '3.75rem',
          height: '0.42rem',
          background: '#F3D402'}}
        icon={null}
        >违规内容将被删除，违禁账号将被永久封禁。</NoticeBar>
        </header>
        <div className='content'
        style={{
          height: '6rem'
        }}
        >
        <div className="select">
          <div style={{
            margin: '0.25rem 0.14rem',
          }}>
        <DatePicker
          mode="date"
          title="Select Date"
          value={this.state.date}
          onChange={date => this.setState({ date })}
        >
          <List.Item arrow="horizontal">选择时间</List.Item>
        </DatePicker>
        <Picker
          title="选择地区"
          data={district}
          value={this.state.pickerValue}
          onChange={v => this.setState({ pickerValue: v })}
          onOk={v => this.setState({ pickerValue: v })}
        >
      <List.Item arrow="horizontal">选择地区</List.Item>
        </Picker>
        </div>
        </div>
        <List>
          <InputItem
            placeholder="起一个吸引人的标题吧"
            clear
            ref={el => this.autoFocusInst = el}
            autoHeight
          >结伴标题</InputItem>
          <InputItem
            placeholder="QQ/微信/手机号"
            clear
            ref={el => this.autoFocusInst = el}
            autoHeight
          >联系方式</InputItem>
          <TextareaItem
            title="结伴需求"
            placeholder="请详细描述你的计划行程"
            data-seed="logId"
            autoHeight
            ref={el => this.customFocusInst = el}
          />
        </List>
        </div>
        <Footer></Footer>
      </div>
    );
  }
}

export default Com
